<template>
  <div>
    <el-table :data="tableData" style="width: 100%" max-height="700">
      <!-- <el-table-column type="index" /> -->
      <el-table-column prop="name" label="名称" width="120" />
      <el-table-column prop="linkUrl" label="链接地址" width="220">
        <template #default="scope">
          <div class="text-truncate" :title="scope.row.imgUrl">
            {{ scope.row.imgUrl }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="imgUrl" label="图片地址" width="220">
        <template #default="scope">
          <div class="text-truncate" :title="scope.row.imgUrl">
            {{ scope.row.imgUrl }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="描述" />
      <!-- <el-table-column label="图片地址">
        <template #default="scope">
          <el-input v-model="scope.row.imgUrl"></el-input>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框 -->
    <el-dialog
      v-model="dialogFormVisible"
      :close-on-click-modal="false"
      width="600px"
      title="编辑友链"
    >
      <el-form
        :model="editData"
        ref="linkForm"
        :rules="rules"
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="editData.name"></el-input>
        </el-form-item>
        <el-form-item label="链接地址" prop="linkUrl">
          <el-input v-model="editData.linkUrl"></el-input>
        </el-form-item>
        <el-form-item label="图片地址" prop="imgUrl">
          <el-input v-model="editData.imgUrl"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="editData.desc"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      tableData: null,
      editData: null,
      dialogFormVisible: false,
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        linkUrl: [
          {
            required: true,
            type: "url",
            message: "你输入的内容不是一个url",
            trigger: "blur",
          },
        ],
        imgUrl: [
          {
            required: true,
            type: "url",
            message: "你输入的内容不是一个url",
            trigger: "blur",
          },
        ],
        desc: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapState(["addLink"]),
  },
  watch: {
    addLink() {
      this.getLinlList();
    },
  },
  methods: {
    // 编辑
    handleEdit(item) {
      this.editData = item;
      this.dialogFormVisible = true;
    },

    // 保存
    async save() {
      let _result;
      this.$refs.linkForm.validate((result) => {
        _result = result;
      });
      if (!_result) return;
      let { data } = await this.$axios({
        method: "POST",
        url: "/administer/link/update",
        data: this.editData,
      });
      if (data.code) return this.$message.error(data.message);
      this.$message.success(data.message);
      this.dialogFormVisible = false;
    },
    // 删除友链
    handleDelete(item) {
      this.$confirm("确定要删除【" + item.name + "】", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let { data } = await this.$axios({
            method: "POST",
            url: "/administer/link/delete",
            data: {
              _id: item._id,
            },
          });
          if (data.code) return this.$message.error(data.message);
          this.$message.success(data.message);
          this.getLinlList();
        })
        .catch(() => {});
    },
    // 获取友链
    async getLinlList() {
      let { data } = await this.$axios({
        method: "GET",
        url: "/getData/getLinkData",
      });
      if (data.code) return;
      if (data.data) this.tableData = data.data;
    },
  },
  created() {
    this.getLinlList();
  },
};
</script>

<style>
</style>